import { Suspense } from "react";
import { Skeleton } from "@/components/ui/skeleton";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import VendorDocumentPage from "./vendor-document-page";

export const metadata = {
  title: "문서 조회 및 업로드",
  description: "협력업체 문서 조회 및 파일 업로드",
};

// ============================================================================
// 로딩 스켈레톤
// ============================================================================

function VendorDocumentSkeleton() {
  return (
    <Card>
      <CardHeader>
        <div className="flex items-center justify-between">
          <Skeleton className="h-8 w-32" />
          <Skeleton className="h-10 w-40" />
        </div>
      </CardHeader>
      <CardContent className="space-y-4">
        <Skeleton className="h-32 w-full" />
        <Skeleton className="h-96 w-full" />
      </CardContent>
    </Card>
  );
}

export default async function DocumentUploadPage({
  searchParams,
}: {
  searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
}) {
  const params = await searchParams;
  
  return (
    <div className="container mx-auto py-6 space-y-6">
      {/* 헤더 */}
      <Card>
        <CardHeader>
          <CardTitle className="text-2xl">문서 조회 및 업로드</CardTitle>
          <CardDescription>
            프로젝트별 할당된 문서를 조회하고 파일을 업로드할 수 있습니다.
          </CardDescription>
        </CardHeader>
      </Card>

      {/* 메인 컨텐츠 */}
      <Suspense fallback={<VendorDocumentSkeleton />}>
        <VendorDocumentPage searchParams={params} />
      </Suspense>
    </div>
  );
}